<template>
  <div>
    <HeaderView></HeaderView>
  </div>
  <div>
    <el-row style="margin: 35px 50px">
      <el-card style="margin: 0 auto">
        <el-col>
          <div class="box1">
            <div class="box2">
              <img :src="params.computerPath" class="image"/>
            </div>
            <div class="box3">
              <p>
                <span class="name">{{ params.computerName }}</span><br>
                <span class="description color1">{{ params.computerDescription }}</span>
              </p>
              <p>
                <span class="name color1">{{ params.computerPrice }}元</span>
              </p>
              <span class="name">选择版本</span>
              <p>
                <el-button class="button pad">全网通版6GB+64GB 2499元</el-button>
                <el-button class="button pad">全网通版6GB+128GB 2899元</el-button>
              </p>
              <span class="name color1">选择颜色</span>
              <p>
                <el-button class="button pad">黑亮色</el-button>
              </p>
              <p><span><hr style="border-top:1px solid #CCC"></span>
                <el-button class="button pad" @click="test">立即选购</el-button>
                <el-button class="button pad" @click="cart">加入购物车</el-button>
              </p>
            </div>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </div>
  <div>
    <FooterView></FooterView>
  </div>
</template>
<script setup>
import HeaderView from '@/components/HeaderView.vue'
import {useRouter} from 'vue-router'
import FooterView from "@/components/FooterView.vue";
const router = useRouter()//相当于this.$router，一般具有功能性，例如路由跳转
console.log(router)
const params = JSON.parse(history.state.data)
const test = () => {
  router.push({name: 'test'})
}
const cart = () => {
  router.push({name: 'cart', query: {params: JSON.stringify(params.value)}})
}
</script>
<style scoped>
.box1 {
  width: 800px;
}
.box2 {
  float: left;
}
.box3 {
  width: 600px;
  float: right;
}
.button {
  font-size: 15px;
  border: 2px #000000 solid;
  background-color: #ffa07a;
  padding: 5px;
  color: #000000;
  min-height: auto;
}
.pad{
  padding: 0 10px;
}
.name {
  font-size: 15pt;
}
.image {
  width: 180px;
  height: 325px;
  padding: 25px 0;
}
.color1 {
  color: #dd8bb8;
}
</style>